import React, { useState } from 'react'
import ReactDOM from 'react-dom/client'
import '../src/styles.css'
import CardCarouselDemo from './components/card-carousel'
import SphereImageGalleryDemo from './components/sphere-image-gallery'

type DemoComponent = 'card-carousel' | 'sphere-image-gallery'

const App: React.FC = () => {
  const [currentDemo, setCurrentDemo] = useState<DemoComponent>('sphere-image-gallery')

  const demos = {
    'card-carousel': {
      name: 'CardCarousel 卡片切换',
      component: <CardCarouselDemo />
    },
    'sphere-image-gallery': {
      name: 'SphereImageGallery 3D球形图片',
      component: <SphereImageGalleryDemo />
    }
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航菜单 */}
      <nav className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <h1 className="text-xl font-bold text-gray-900">组件库演示</h1>
            </div>
            <div className="flex space-x-4">
              {Object.entries(demos).map(([key, demo]) => (
                <button
                  key={key}
                  onClick={() => setCurrentDemo(key as DemoComponent)}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                    currentDemo === key
                      ? 'bg-blue-100 text-blue-700 border border-blue-200'
                      : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                  }`}
                >
                  {demo.name}
                </button>
              ))}
            </div>
          </div>
        </div>
      </nav>

      {/* 内容区域 */}
      <main>
        {demos[currentDemo].component}
      </main>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
